<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回调函数形式的ref</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script src="./js/prop-types.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        class Abc extends React.Component{
            state = {isHot:true}
            showData1 = ()=>{
               // console.log(this.refs.input1)
                const{input1} = this
                alert(input1.value)
            }
            // 一定要是箭头函数,否则拿不到this
            showData2=()=>{
                const {input2} = this
                alert(input2.value)
            }
            changeWeather = ()=>{
                const {isHot} = this.state
                // this.setState = ({isHot:!isHot}) 错误的写法
                this.setState({isHot:!isHot})
            }
            saveInput = (c)=>{
                this.input1 = c
                console.log(c)
            }
            render(){
                // 回调函数中的ref会把当前的节点传入
                const {isHot} = this.state
                return (
                  <div>
                      <h2>今天天气{isHot?'炎热':'凉爽'}</h2>
                      {/*<input ref={c=>{this.input1 = c;console.log('c',c)}} type="text" placeholder="点击按钮提示数据"/>&nbsp;*/}
                      <input type="text" ref={this.saveInput} placeholder="点击按钮提示数据"/>
                      <button onClick={this.showData1}>按钮</button>&nbsp;
                      <input ref={c=>this.input2=c} onBlur={this.showData2} type="text" placeholder="失焦提示左边输入框数据"/>
                      <br/>
                      <button onClick={this.changeWeather}>切换天气</button>
                  </div>
                )
            }
        }
        ReactDOM.render(<Abc />,document.getElementById('app'))

    </script>
</body>
</html>
